<template>
  <div class="simple-steps">
    <template
      v-for="(item, index) in steps"
      :key="index"
    >
      <div
        class="step"
        :class="{
          'current-step': index === activeIndex,
          'finished-step': index < activeIndex || activeIndex === steps.length - 1,
        }"
        :style="{
          'flex-basis': 100 / steps.length + '%'
        }"
      >
        <div
          v-if="index < activeIndex || activeIndex === steps.length - 1"
          class="icon icon__finished"
        >
          <el-icon><Check /></el-icon>
        </div>
        <div
          v-else
          class="icon"
        >
          {{ index + 1 }}
        </div>

        <div
          v-if="index !== steps.length - 1"
          class="line"
        />

        <div class="info title">
          {{ item.title }}
        </div>

        <div class="info description">
          {{ item.description }}
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {Check} from "@element-plus/icons-vue";

const props = defineProps<{
  steps: {
    title: string;
    description?: string;
  }[],
  activeIndex: number
}>()

</script>

<style scoped lang="scss">
.simple-steps {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .finished-step {
    .icon {
      //border-color: var(--el-color-primary);
      //color:  var(--el-color-primary);
      border-color: #E03221;
      color: #E03221;
    }

    .info {
      color: #E03221;
      //color:  var(--el-color-primary);
    }

    .line {
      background: #E03221;
      //background:  var(--el-color-primary);
    }
  }

  .current-step {
    .icon {
      border-color: #E03221;
      color: white;
      background: #E03221;
    }

    .info {
      color: #E03221;
    }

    .line {
      //background: #E03221;
    }
  }
}

.icon {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: solid 2px #999999;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  background: white;
  z-index: 1;
}

.line {
  height: 2px;
  background: #999999;
  width: 100%;
  position: absolute;
  top: 10px;
  left: 0%;
  transform: translateX(50%);
  z-index: 0;
}

.active-line {
  background: #E03221;
}

.info {
  word-break: keep-all;
  white-space: nowrap;
}

.title {
  font-size: 16px;
  margin-top: 5px;
}

.description {
  font-size: 12px;
  margin-top: 5px;
}

</style>
